<template>
  <div class="app-container">
    <!-- 列表 -->
    <el-table v-loading="loading" :data="datas" :height="height" style="width: 100%" border>
      <el-table-column prop="banji" label="班级" min-width="50" sortable="custom"/>
      <el-table-column prop="xueke" label="学科" min-width="50" sortable="custom"/>
      <el-table-column prop="teacher" label="教师" min-width="50" sortable="custom"/>
      <el-table-column label="操作" min-width="50" align="right" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="success" @click="edit(row)" :disabled="row.disabled">{{row.btnTitle}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogTitle" :visible.sync="dialog" :fullscreen="true" :before-close="cancel">
      <el-table v-loading="loading" :data="pingjiaoTable.zhibiaos" :height="height" style="width: 100%" border>
        <el-table-column label="指标等第" min-width="50" align="left">
          <template slot-scope="{ row }">
            {{row.name}}
            <br />
            <el-radio v-model="pingjiaoData[row.id]" :label="dengdi.dm" v-for="(dengdi, index) in pingjiaoTable.dengdis">{{dengdi.name}}</el-radio>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination'
import { list, info, add, edit, del,listShoukebiao,getPingjiaoTable,save } from '@/api/pingjiao_content'

export default {
  name: 'PingjiaoContent',
  data() {
    return {
      loading: false,
      value:'',
      datas: [],
      pingjiaoTable:{pingjiao:null,zhibiaos:[],dengdis:[]},
      pingjiaoData:[],
      dialog: false,
      dialogTitle: '',
      model: {
        id:'',
        student_id:'',
        teacher_id:'',
        xueke_id:'',
        banji_id:'',
        pingjiao_id:'',
        defen:'',
        quanzhong:'',
        fenshu:'',
        answer:'',
        zhibiao_dm:'',
      }
    }
  },
  created() {
    this.height = screenHeight()
    this.listShoukebiao()
  },
  methods: {
    // 列表
    listShoukebiao() {
      this.loading = true
      listShoukebiao().then(res => {
        this.datas = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getPingjiaoTable() {
      this.loading = true
      getPingjiaoTable().then(res => {
        this.pingjiaoTable = res.data
         this.pingjiaoTable.zhibiaos.forEach(zhibiao=>{
           this.pingjiaoData[zhibiao.id]='A';
         })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    edit(row) {
      this.dialog = true
      this.dialogTitle = '评教：' + row.banji + row.xueke + row.teacher
      this.model.banji_id=row.banji_id
      this.model.xueke_id=row.xueke_id
      this.model.teacher_id=row.teacher_id
      this.getPingjiaoTable()
    },
    // 取消
    cancel() {
      this.dialog = false
    },
    // 提交
    submit() {
      this.loading = true
      let data=[];
      let _this = this;
      this.pingjiaoData.forEach(function(value,index,array){
        var zhibiao = _this.pingjiaoTable.zhibiaos.find(zhibiao=>{ return index == zhibiao.id })
        var dengdi = _this.pingjiaoTable.dengdis.find(dengdi=>{ return dengdi.dm == value })
        data.push({banji_id:_this.model.banji_id,xueke_id:_this.model.xueke_id,teacher_id:_this.model.teacher_id,pingjiao_id:_this.pingjiaoTable.pingjiao.id,zhibiao_dm:zhibiao.dm,
          quanzhong:dengdi.quanzhong,answer:dengdi.dm,fenshu:zhibiao.fenshu,defen:zhibiao.fenshu*dengdi.quanzhong
        })
      });
      save(data).then(res => {
        console.log(res.data)
        this.dialog = false
        this.listShoukebiao()
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
